<script setup lang="ts">
import ChannelNav from './components/ChannelNav.vue'
import ArticleList from './components/ArticleList.vue'

import { ref } from 'vue'

// 1. 定义 频道 id
const channelId = ref(0)

const changeIdFunc = (newId: number) => {
  console.log(newId)
  channelId.value = newId
}

// 1. 将id 传递给子组件
// 2. 子组件监听 id 改变
// 3. 重新获取对应的数据
</script>

<template>
  <ChannelNav @change-id="changeIdFunc" :channel-id="channelId"></ChannelNav>
  <ArticleList :channel-id="channelId"></ArticleList>
</template>
